<template>
<div class="boxbox">
    <div class="loginc">
       <div class="box">
         <div class="work"><img src="https://static.zhipin.com/v2/web/geek/images/logo.png" alt="">
            <div>
                <a href="/"><p>找工作</p></a>
                <a href="/"><p>上BOSS直聘直接谈</p></a>
            </div>
        </div>
        <div class="work2">
            <img src="https://img2.baidu.com/it/u=2721744129,3342222959&fm=253&fmt=auto&app=138&f=JPEG?w=525&h=500" alt="">
             <div>
                <h4>沟通</h4>
                <p>在线职位及时沟通</p>
             </div>
        </div>
        <div class="work3">
            <img src="https://img0.baidu.com/it/u=906405806,25286934&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500" alt="">
             <div>
                <h4>任性选</h4>
                <p>各大行业职位任你选</p>
             </div>
        </div>
       </div>
       <div class="zhao">
        <div class="an">  
          <!-- <a class="diyi">我要找工作</a>
          <a class="diyi">我要招聘</a> -->
          <button>我要找工作</button>
          <button>我要招聘</button>
        </div>
        <input type="text" class="number" v-model="phoneNumber"><div class="tip"><span>*</span>请输入手机号</div><br>
        <input type="password" class="password1" v-model="password1"><div class="tip"><span>*</span>请输入密码</div><br>
        <input type="password" class="password" v-model="password2"><div class="tip"><span>*</span>请重复输入密码</div><br>
        <button class="dier" @click="register">注册</button>
      <br>
      <p class="disan">客服电话 400-065-5799  工作时间:9:30-18:30</p>
      <p class="disi">人力资源服务许可证|营业执照|朝阳区人社局监督电话</p>
      </div>
      
    </div>
    </div>
</template>

<script>


export default {
  name: 'login',
  data() {
    return {
      title:'这是登录',
      phoneNumber: "",
      password1: "",
      password2: "",
      RegCheck: /^[1][3,4,5,7,8][0-9]{9}$/
    }
  },
  methods: {
    // 测试注册
    register(){

      /* if( !this.RegCheck.test(this.phoneNumber)){
        alert("请输入正确的手机号");
      } */
      // 判断手机号或密码是否输入
      if(this.phoneNumber === "" || !this.RegCheck.test(this.phoneNumber)){
        alert("请输入正确的手机号");
      }else{
        if(this.password1 === ""){
          alert("请输入密码");
        }else{
          if(this.password1 !== this.password2){
            alert("两次密码不一致");
          }else{
            // 注册成功，保存信息到本地存储，并跳转到登录界面
            const userInfo_register = {
              phoneNumber: this.phoneNumber,
              password1: this.password1,
              password2: this.password2,
            };
            localStorage.setItem("userInfo", JSON.stringify(userInfo_register));
            // 测试注册成功跳转到登录页面
            this.$router.push({
              name: "login"
            });
          }

          }
        }
      }
  }

}
</script>

<style lang="less" scoped>
 body {margin: 0;padding: 0;}
  .boxbox{
    display: flex;
    background-image: url(https://static.zhipin.com/zhipin-geek/v537/web/geek/images/newbg.png);
  background-repeat: repeat;
  background-color:  #5dd5c8;
  }
        a{text-decoration: none;}
        .loginc{height: 520px;width: 730px;margin: 90px auto;background: white;border-radius: 10px;display: flex;}
      .zhao{ width: 500px; flex-direction: column;}
       p{margin: 0;padding: 0; color:#8d92a1;font-size: 12px;}
       h4{margin: 0;padding: 0;color:#8d92a1;}
       .box{background: #f8fcff;border-radius: 10px 0 0 10px;flex: 1;}
       .work{display: flex;margin: 80px 30px 0px 30px;}
       .work img{width: 40px;height:40px;margin-right: 8px;}
       .work p{color: #5dd5c8;font-size: 15px;}
       .work2{display: flex;margin: 50px 30px;}
       .work2 img{width: 40px;height:40px;margin-right: 10px;}
       .work3{display: flex;margin: 0px 30px;}
       .work3 img{width: 40px;height:40px;margin-right: 10px;}
       .an{width: 350px; margin: 50px auto 0px;}
       button{background: white;width: 150px; height: 40px;margin-left: 10px;border: 1px solid #ccc;}
       button:hover{border: 1px solid #5dd5c8;color: #5dd5c8;}
       .diyi{margin-right: 50px;}
       input{width: 350px;height: 40px;margin: 10px 73px 0px 73px;}
       .dier{ width: 350px; height: 40px;margin: 30px 73px 0px 73px;color: #f8fcff;background: #5dd5c8;font-size: 17px;}
      .dier:hover{color: #f8fcff;background: #5dd5c8;border: 1px solid black;}
       .disan{margin: auto;padding-left: 120px;margin-top: 10px;}
       .disi{margin: auto;padding-left: 100px;margin-top: 10px;}
       .tip{color: #8d92a1;margin-left: 75px;}
       span{color: red;font-size: 20px;}
       
</style>